import { getCurrentInstance, onMounted } from 'vue'
import {addPopUp} from '@/hook/mapgis-api/addPopUp'
export const useToolsBoxHook = () => {
  const { proxy } = getCurrentInstance()

  /* 测量工具的实现 */
  /* 1、设置空的图层 --设置画布 */
  const source = new ol.source.Vector({
    features: []
  })
  const layer = new ol.layer.Vector({
    source,
    style: new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 2,
        lineDash: [10, 10]
      })
    })
  })

  let $map = null
  let Zoom = null
  let lengthOverlay = null
  let areaOverlay = null
  let drawLine = null
  let drawArea = null

  onMounted(() => {
    $map = proxy.$map
    $map.addLayer(layer)
    // 创建长度显示的Overlay
    lengthOverlay = addPopUp.add({
      target:document.querySelector('#length-overlay')
    })
    areaOverlay = addPopUp.add({
      target:document.querySelector('#area-overlay')
    })
    /* 2、创建测量距离的画笔 */
    drawLine = new ol.interaction.Draw({
      // 绘制的图层
      source: source,
      // 绘制的类型
      type: 'LineString'
    })
    /* 3、创建测量面积的画笔 */
    drawArea = new ol.interaction.Draw({
      // 绘制的图层
      source: source,
      // 绘制的类型
      type: 'Polygon'
    })

    $map.addOverlay(lengthOverlay)
    $map.addOverlay(areaOverlay)
  })

  /* 测量距离 */
  const activeDrawLine = () => {
    $map.removeInteraction(drawArea)
    $map.addInteraction(drawLine)
    // 监听绘制开始
    drawLine.on('drawstart', function (e) {
      const feature = e.feature
      feature.getGeometry().on('change', (geomEvt) => {
        Zoom = $map.getView().getZoom()
        const geom = geomEvt.target
        let positions = geom.getCoordinates()
        // 计算距离
        var line = turf.lineString(positions)
        //默认公里
        var distance = turf.lineDistance(line)
        const position = geom.getLastCoordinate()
        lengthOverlay.setPosition(position)
        if (Zoom < 17) {
          document.querySelector('#length-overlay').innerHTML = distance.toFixed(2) + '公里'
        } else {
          let res = turf.convertLength(distance, 'kilometers', 'meters')
          document.querySelector('#length-overlay').innerHTML = res.toFixed(2) + '米'
        }
      })
    })
  }

  /* 测量面积 */
  const activeDrawArea = () => {
    $map.addInteraction(drawArea)
    $map.removeInteraction(drawLine)
    // 监听绘制开始
    drawArea.on('drawstart', function (e) {
      const feature = e.feature
      feature.getGeometry().on('change', (geomEvt) => {
        Zoom = $map.getView().getZoom()
        const geom = geomEvt.target
        let positions = geom.getCoordinates()
        if (positions[0].length > 3) {
          // console.log(positions)
          var polygon = turf.polygon(positions)
          var area = turf.area(polygon) //平方米
          // console.log(area)
          var centroid = turf.centroid(polygon) // 重心
          let position = centroid.geometry.coordinates
          areaOverlay.setPosition(position)
          if (Zoom > 17) {
            document.querySelector('#area-overlay').innerHTML = area.toFixed(2) + '平方米'
          } else {
            let res = turf.convertArea(area, 'meters', 'kilometers')
            document.querySelector('#area-overlay').innerHTML = res.toFixed(2) + '平方公里'
          }
        }
      })
    })
  }

  /* 清除测量 */

  const clearDraw = () => {
    source.clear()
    $map.removeInteraction(drawLine)
    $map.removeInteraction(drawArea)
    areaOverlay.setPosition(undefined)
    lengthOverlay.setPosition(undefined)
  }

  /* 导出图片 */
  const exportImg = () => {
    $map.once('postcompose', function (event) {
      const canvas = event.context.canvas
      console.log(canvas)
      canvas.toBlob(function (blob) {
        console.log(blob)
        saveAs(blob, 'map.png')
      })
    })
    $map.renderSync()
  }
  return { activeDrawLine, activeDrawArea, clearDraw, exportImg }
}
